<template>
  <div>
    <div><h3>聊天室</h3></div>
    <div>
      <div>
        <el-input
          type="textarea"
          :autosize="{ minRows: 10, maxRows: 20 }"
          placeholder="聊天内容"
          v-model="chatMessage"
        >
        </el-input>
      </div>
      <div style="margin-top: 20px">
        {{ this.chatMessageVo }}
        <el-form :inline="true" :model="chatMessageVo" class="demo-form-inline">
          <el-form-item label="消息">

            <el-input
              v-model="chatMessageVo.longitude"
              style="width: 600px"
              placeholder="经度"
            ></el-input>

            <el-input
              v-model="chatMessageVo.latitude"
              style="width: 600px"
              placeholder="纬度"
            ></el-input>

            <el-input
              v-model="chatMessageVo.nickname"
              style="width: 600px"
              placeholder="发送端："
            ></el-input>

            <el-input
              v-model="chatMessageVo.target"
              style="width: 600px"
              placeholder="接收端："
            ></el-input>
            <el-input
              v-model="chatMessageVo.content"
              style="width: 600px"
              placeholder="请输入消息"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onOneMessage()">私聊</el-button>
            <el-button type="primary" @click="onQunMessage()">群聊</el-button>

            <el-button type="primary" @click="onOpen">连接服务器</el-button>
            <el-button type="primary" @click="onQun">加入群聊</el-button>
            <el-button type="primary" @click="onClose">断开连接</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      chatMessage: "",

      chatMessageVo: {
        code: "",
        nickname: "",
        type: "",
        target: "",
        content: "",
        longitude: "",
        latitude: "",
      },

      websocket: null,
    };
  },
  mounted() {},
  methods: {
    //连接  10001
    //私聊  10002  1
    //群聊  10003  2

    // onSiMessage
    onSiMessage() {
      //
      this.chatMessageVo.code = "10002";
      this.chatMessageVo.type = "1";
      //完善 数据
      let msg = JSON.stringify(this.chatMessageVo);
      //转成 json 报文消息
      this.websocket.send(msg);
    },
    // onQunMessage
    onQunMessage() {
      //
      this.chatMessageVo.code = "10002";
      this.chatMessageVo.type = "2";
      //完善 数据
      let msg = JSON.stringify(this.chatMessageVo);
      //转成 json 报文消息
      this.websocket.send(msg);
    },
    onOneMessage() {
      //
      this.chatMessageVo.code = "10004";
      this.chatMessageVo.type = "1";
      //完善 数据
      let msg = JSON.stringify(this.chatMessageVo);
      //转成 json 报文消息
      this.websocket.send(msg);
    },
    // Qun 加入群聊
    onQun() {
      //
      this.chatMessageVo.code = "10003";
      //完善 数据
      let msg = JSON.stringify(this.chatMessageVo);
      //转成 json 报文消息
      this.websocket.send(msg);
    },

    // 连接服务器
    onOpen() {
      let url = "ws://localhost:12424/ws";

      // 打开一个websocket
      this.websocket = new WebSocket(url);

      // 建立连接
      this.websocket.onopen = this.open;

      // 客户端接收服务端返回的数据
      this.websocket.onmessage = this.getMessage;
      // 发生错误时
      this.websocket.onerror = this.error;
      // 关闭连接
      this.websocket.onclose = this.close;
    },
    // 断开服务器
    onClose() {
      this.websocket.close();
    },

    // 以下为websocket回调函数
    open() {
      console.log("socket连接成功");
      //
      this.chatMessageVo.code = "10001";
      //完善 数据
      let msg = JSON.stringify(this.chatMessageVo);

      // 发送消息
      this.doSendMessage(msg);
    },
    error() {
      console.log("连接错误");
    },

    getMessage(msg) {
      console.log("getMessage", msg.data);
      this.chatMessage = this.chatMessage + "\n";
      this.chatMessage = this.chatMessage + msg.data;
      console.log("getMessage2", this.chatMessage);
    },

    close() {
      console.log("socket已经关闭");
    },
    doSendMessage(msg) {
      this.websocket.send(msg);
    },
  },
};
</script>

<style>
</style>
